<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="Component" content="width=device-width, initial-scale=1.0">
    <title>Component Test</title>

    <!-- 字体链接 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">

    <link rel="stylesheet" id="style-css" href="./HeadOver/HeadOver.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="./ToggleButton/ToggleButton.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="./IntputRange/IntputRange.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="./DataPlate/DataPlate.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="./Guide/Guide.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="./FuncBlock/funcBlock.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="./Subtitle/Subtitle.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="./ScrollText/ScrollText.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="./TypeClass/TypeClass.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="./TypeClassifier/TypeClassifier.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="./MessageBlock/MessageBlock.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="./MessageWindow/MessageWindow.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="./ScrollButton/ScrollButton.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="./ScrollClock/ScrollClock.css" type="text/css" media="all">
</head>

<style>
    body {
        background-color: rgba(239, 242, 255, 1);
    }
</style>

<body>
    <!-- 头组件 -->
    <div class="headOver">
        <div class="back">
            <span> Device Control </span>
        </div>
    </div>

    <div style="height: 50px;"></div>

    <div style="background-color: white;">
    <!-- 滚动时钟组件 -->
    <div class="scrollClock">

    </div>
    <div class="scrollClock1">

    </div>
    </div>

    <div style="height: 50px;"></div>

    <!-- 滚动按钮组件 -->
    <div class="ScrollButton">
        <button>
            <!-- 滚动文字组件 -->
            <div class="ScrollText">
                <span class="wrap">
                    <span class="item">
                        Click Start
                    </span>
                </span>
            </div>
        </button>
    </div>

    <!-- 滚动按钮组件 -->
    <div class="ScrollButton">
        <button>
            <!-- 滚动文字组件 -->
            <div class="ScrollText">
                <span class="wrap">
                    <span class="item">
                        Click Start
                    </span>
                </span>
            </div>
        </button>
    </div>

    <div style="height: 50px;"></div>

    <div class="tempBox" style="height: 500px; overflow: scroll; width: fit-content; display: flex;">
    <!-- 信息块窗口组件 -->
    <div class="messageWindow">
        <div class="messagePageWindow">
            <div class="messagePageList">
                <div class="messagePage" id="mPage_0">
                    <!-- 信息块组件 -->
                    <div class="messageBlock"></div>
                    <!-- 信息块组件 -->
                    <div class="messageBlock"></div>
                    <!-- 信息块组件 -->
                    <div class="messageBlock"></div>
                </div>
                <div class="messagePage" id="mPage_1">
                    <!-- 信息块组件 -->
                    <div class="messageBlock"></div>
                    <!-- 信息块组件 -->
                    <div class="messageBlock"></div>
                </div>
            </div>
            <div class="frontShadow"></div>
            <div class="backShadow"></div>
            <div class="topShadow"></div>
            <div class="bottomShadow"></div>
        </div>
    </div>
    </div>


    <div style="height: 50px;"></div>

    <!-- 信息块组件 -->
    <div class="messageBlock">
        <div class="back" style="background-image: url(./MessageBlock/test.png);">
            <span class="rectOut">
            <span class="rectIn">
                <span class="labelTime">
                    <!-- 滚动文字组件 -->
                    <div class="ScrollText">
                        <span class="wrap">
                            <span class="item">
                                New
                            </span>
                        </span>
                    </div>
                </span>

                <span class="labelTitle">
                    <!-- 滚动文字组件 -->
                    <div class="ScrollText">
                        <span class="wrap">
                            <span class="item">
                                Transforming a house
                            </span>
                        </span>
                    </div>
                </span>

                <span class="labelFrom">
                    <!-- 滚动文字组件 -->
                    <div class="ScrollText">
                        <span class="wrap">
                            <span class="item">
                                Benjamin Booker
                            </span>
                        </span>
                    </div>
                </span>

            </span>
            </span>
        </div>
    </div>

    <div style="height: 50px;"></div>

    <div class="testBox" style="width: 50px; display: flex; justify-content: center;">
        <!-- 滚动文字组件 -->
        <div class="ScrollText">
            <span class="wrap">
                <span class="item">
                    我是开头，我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间，我是结尾
                </span>
            </span>
        </div>
    </div>

    <div style="height: 50px;"></div>

    <!-- 类组件 -->
    <div class="typeClass">
        <label for="typeClassB1">
            <input type="radio" id="typeClassB1" name="typeClassB">
            <span class="icon"> <i style="background-image: url(./TypeClass/睡眠图标.svg);"></i> </span>
            <div class="label">
                <!-- 滚动文字组件 -->
                <div class="ScrollText">
                    <span class="wrap">
                        <span class="item">
                            TestTestTest
                        </span>
                    </span>
                </div>
            </div>
        </label>
    </div>

    <div style="height: 50px;"></div>

    <!-- 类分类器组件 -->
    <div class="typeClassifier" id="typeClassifierA">
        <div class="typeClassList">

        </div>
        <div class="frontShadow"></div>
        <div class="backShadow"></div>
    </div>

    <div style="height: 50px;"></div>

    <!-- 数据盘组件 -->
    <div class="dataPlate">
        <span class="progress">
            <span class="plate" dataFoo='250.0 Hz'>
            </span>
        </span>

        <div class="dataPlateInputRangeSpace"></div>

        <!-- 滑块组件 -->
        <div class="inputRange">
            <label for="range">
                <input type="range" id="range">
                <span class="track"> <span class="cover"></span> </span>
            </label>
        </div>
    </div>

    <div style="height: 50px;"></div>

    <!-- 子标题 -->
    <div class="subtitle">
        <span> subtitle </span>
    </div>

    <div style="height: 50px;"></div>

    <!-- 按钮组件 -->
    <div class="toggleButton">
        <label for="toggle1">
            <input type="checkbox" id="toggle1">
            <span></span>
        </label>
    </div>

    <div style="height: 50px;"></div>

    <!-- 功能块组件 -->
    <div class="funcBlock">
        <div class="back">
            <div class="headBox">
                <span class="icon"> <i style="background-image: url(../img/DeviceControl/FuncBlock/链接.svg);"></i> </span>
                <span class="label">
                    <!-- 滚动文字组件 -->
                    <div class="ScrollText">
                        <span class="wrap">
                            <span class="item">
                                Link Device Link Device Link Device
                            </span>
                        </span>
                    </div>
                </span>

                <!-- 按钮组件 -->
                <div class="toggleButton">
                    <label for="toggle2">
                        <input type="checkbox" id="toggle2">
                        <span></span>
                    </label>
                </div>
            </div>

            <div class="tailBox">
                <div class="tailContain">
                    <!-- 装饰用 -->
                    <div class="line"></div>
                </div>
            </div>

        </div>
    </div>

    <div style="height: 50px;"></div>

    <!-- 导航栏组件 -->
    <div class="guide">
        <div class="back">
            <nav><ul>
                <div class="slider"></div>
                <li><a href="#" id="guideA1"></a></li>
                <li><a href="#" id="guideA2"></a></li>
                <li><a href="#" id="guideA3"></a></li>
                <li><a href="#" id="guideA4"></a></li>
            </ul></nav>
        </div>
    </div>
</body>

<script src="./TypeClassifier/TypeClassifier.js" type="text/javascript"></script>
<script src="./IntputRange/IntputRange.js" type="text/javascript"></script>
<script src="./DataPlate/DataPlate.js" type="text/javascript"></script>
<script src="./Guide/Guide.js" type="text/javascript"></script>
<script src="./MessageBlock/MessageBlock.js" type="text/javascript"></script>
<script src="./ScrollText/ScrollText.js" type="text/javascript"></script>
<script src="./MessageWindow/MessageWindow.js" type="text/javascript"></script>
<script src="./test.js" type="module"></script>

</html>